/*----------------------------------------*\
  MAIN SEARCH
\*----------------------------------------*/

.search--main {
  @apply flex;
  @apply relative z-50;

  & .form__group__input {
    @apply w-full h-full;
    @apply absolute right-0;
  }

  & input {
    @apply bg-opacity-0;
    @apply absolute right-0 z-30;
    @apply cursor-pointer;
    @apply opacity-0;
    @apply shadow-none;
    @apply transition-all duration-300;

    &:focus {
      @apply w-[40vw] xs:w-[35vw] lg:w-72;
      @apply pr-10;
      @apply z-0;
      @apply opacity-100;
      @apply cursor-text;
      @apply shadow-2xl;
    }
  }
}

.search--main .search__group .form__group__input input {
  @apply -mt-1 xl:mt-0;
}

.form__group__input:focus-within + .search__button > .search__button__title {
  @apply hidden;
}

.search__button {
  @apply flex items-center;
  @apply lg:p-1 xl:p-2 2xl:py-3;
  @apply relative z-10;
  height: 100%;
}

.search__button__title {
  @apply sr-only lg:not-sr-only;
  @apply lg:pr-1.5 lg:-mt-0.5;
}

.search__button__icon {
  @apply !h-9 !w-9;
  @screen lg {
    @apply !h-7 !w-7;
  }

  svg {
    stroke-width: 0.5px;
  }
}

.body--search-is-open {
  .logo {
    @apply opacity-0 xs:opacity-100;
  }
}

/*----------------------------------------*\
  TOP BAR SEARCH
\*----------------------------------------*/

.search--negative {
  @apply bg-secondary-500;
}

.search__group {
  @apply flex items-stretch justify-between relative;

  & label {
    @apply sr-only;
  }

  & input {
    @apply h-full lg:py-4;
    @apply pr-12;
    @apply bg-white;
  }

  .search--negative & input {
    @apply bg-secondary-500 border-secondary-400;
    @apply relative z-10;

    &::placeholder {
      @apply text-secondary-100;
    }
  }

  .search--large & {
    @apply h-16;

    & input {
      @apply text-xl font-bold shadow-none;
    }
  }

  .btn {
    @apply absolute top-0 right-0 bottom-0 z-20;
  }
}

.search__field {
  @apply font-bold text-2xl;
  @apply p-3;
  @apply w-full;
  @apply outline-none;

  &::placeholder {
    @apply text-secondary-200;
  }

  .search--negative & {
    @apply text-white;
    @apply bg-secondary-500;
  }
}

.search__icon {
  @apply h-8 mx-3;
  @apply text-white;
}

.search__results {
  @apply h-96 w-full;
  @apply overflow-y-scroll;
  @apply overflow-x-hidden;
}

.search__results--negative {
  @apply border border-secondary-400;
}

/*----------------------------------------*\
 SEARCH RESULTS PAGE
\*----------------------------------------*/

.search--page-result {
  @apply lg:w-4/5 xl:w-2/3;
  @apply pt-4 md:pt-6 2xl:pt-8;

  svg {
    @apply w-10 h-10;
    @apply stroke-0;
  }
}

.search-results--list {
}

.search-results--grid {
  .search-results-list {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
    @apply gap--responsive;
    @apply gap--top;
  }
}

.search-results__tabs {
  @apply pt-8 sm:pt-12 2xl:pt-16;
}

.search-results__header {
  @apply flex flex-wrap gap-4 items-center justify-between;
  @apply text--sm;
  @apply pt-4 sm:pt-6 2xl:pt-8;
  @apply pb-2 sm:pb-3 2xl:pb-4;
  @apply border-b border-secondary-300;

  strong {
    @apply block sm:inline mr-[1ex] font-regular;
  }
}

.search-results__header__left {
  @apply flex items-stretch;
}

.search-results__occurences {
  @apply flex items-center;
}

.search-results__header__right {
  @apply flex ml-auto;

  select {
    @apply text-right;
  }
}

.search-results .notification {
  @apply my-16;
}

.search-results__no-results {
  @apply container--py;

  h2,
  ul {
    @apply mb-6 lg:mb-8 2xl:mb-10;
  }
}

.search__filters {
  @apply mt-4;
}

.search__filters__actions {
  @apply flex flex-wrap gap-x-2;
}

.search__filters__drawer {
  @apply grid md:grid-cols-2 lg:grid-cols-3;
  @apply gap-3 lg:gap-4;
  @apply pt-4 sm:pt-6 2xl:pt-8;
  @apply pb-2 sm:pb-3 2xl:pb-4;
  @apply mt-4 sm:mt-6 2xl:mt-8;
  @apply border-t border-secondary-200;
}

.search__filters__tags {
  @apply flex flex-wrap;
  @apply pt-4 sm:pt-6 2xl:pt-8;
}

/*----------------------------------------*\
 DEPRECATED
 TODO - remove when .search-result has been replaced 
 by .card.card--list component 
\*----------------------------------------*/

.search-result {
  @apply card--flat;
  @apply block space-y-4;

  &,
  &:hover {
    @apply no-underline text-inherit; /* override general styling for links in main */
  }

  @media screen(sm) {
    @apply grid gap-x-6;
    grid-template-columns: 4fr 1fr;
  }

  .meta-info {
    grid-column: 1 / 2;
  }
}

.search-result__title {
  grid-column: 1 / 2;
  @apply text--xl text--bold;
  @apply transition-colors duration-200;

  .search-result:hover & {
    @apply text-primary-600;
  }
}

.search-result__description {
  grid-column: 1 / 2;
}

.search-result__specs,
.search-result__topics {
  @apply text--sm text--light;
  grid-column: 1 / 2;
}

.search-result__icons {
  grid-column: 1 / 2;
  @apply flex space-x-4;
}

.search-result__image {
  grid-column: 2 / 3;
  grid-row: 1 / 10;

  @apply block;
  @apply sm:mt-0 !important;

  & picture {
    @media (min-width: theme('screens.sm')) {
      @apply block ratio ratio--1/1;
    }
  }

  & img {
    @apply max-w-[50%] sm:max-w-none;
    @apply sm:object-contain sm:object-right-top;
    @apply shadow-none;
  }
}

.search-results__sort {
  @apply flex flex-wrap gap-x-4 justify-end;

  .form__group {
    @apply flex gap-x-4;
  }
}

/*----------------------------------------*\
 END - DEPRECATED
\*----------------------------------------*/
